<template>
  <div class="box">
    <table-search
      slot="searchbar"
      v-model="searchData"
      :columns="searchOptions"
      @search="handleSearch"
    >
      <template slot="button">
        <a-button
          @click="handleExport"
          icon="download"
          style="color: #606266"
          slot="button"
          type="link"
        >
          导出 </a-button
        >|
        <a-button
          @click="handleAdd"
          icon="plus"
          style="color: #606266"
          slot="button"
          type="link"
        >
          添加
        </a-button>
      </template>
    </table-search>
    <div class="table-box">
      <a-table
        :columns="columns"
        :data-source="data"
        size="middle"
        :scroll="{ x: 1040 }"
        :pagination="false"
        algin="canter"
      >
        <template slot="index" slot-scope="scope">{{ scope.key }}</template>
        <template slot="controlStatus" slot-scope="scope">
          <span v-if="scope.controlStatus == 1" style="color: #22bb75"
            >在线</span
          >
          <span v-else style="color: #909399">离线</span>
        </template>
        <template slot-scope="scope" slot="action">
          <a-button
            style="color: #2a5ee3"
            type="link"
            @click="handleEdit(scope)"
            size="small"
          >
            编辑
          </a-button>
          <a-button
            style="color: #f34f4a"
            type="link"
            @click="handleDelete(scope)"
            size="small"
          >
            删除
          </a-button>
        </template>
      </a-table>
      <div class="pagination-box">
        <a-pagination
          show-quick-jumper
          @change="handleChange"
          :show-total="(total) => `共 ${total} 条`"
          :defaultCurrent="pagination.current"
          :pageSize="pagination.pageSize"
          :total="pagination.total"
          :hideOnSinglePage="true"
        />
      </div>
    </div>
    <a-modal :visible="visible" width="960px">
      <template slot="title">
        <span>{{ modalTitle ? "编辑收银机" : "添加收银机" }}</span>
      </template>
      <template slot="closeIcon">
        <div style="width: 100%; height: 100%" @click="handleCancel">
          <a-icon type="close" />
        </div>
      </template>
      <template slot="footer">
        <div style="text-align: center">
          <a-button
            style="margin: 0 25px"
            key="back"
            type="danger"
            ghost
            @click="handleCancel"
          >
            取消
          </a-button>
          <a-button
            style="margin: 0 25px"
            key="submit"
            type="primary"
            :loading="confirmLoading"
            @click="handleOk"
          >
            确定
          </a-button>
        </div>
      </template>
      <a-form-model
        :model="form"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
        layout="inline"
      >
        <a-form-model-item
          label="收银机名称："
          style="width: 50%; margin: 0 0 24px"
        >
          <a-input
            v-model="form.supermarketName"
            placeholder="请输入收银机名"
          />
        </a-form-model-item>
        <a-form-model-item
          label="税控设备ID:"
          style="width: 50%; margin: 0 0 24px"
        >
          <a-input v-model="form.taxpayer" placeholder="请输入税控设备ID" />
        </a-form-model-item>
        <a-form-model-item
          label="所属超市："
          style="width: 50%; margin: 0 0 24px"
        >
          <a-input v-model="form.legal" placeholder="请输入所属超市" />
        </a-form-model-item>
        <a-form-model-item
          label="收银机厂家："
          style="width: 50%; margin: 0 0 24px"
        >
          <a-input v-model="form.creditCode" placeholder="请输入收银机厂家" />
        </a-form-model-item>
        <a-form-model-item
          label="收银机型号："
          style="width: 50%; margin: 0 0 24px"
        >
          <a-input v-model="form.phone" placeholder="请输入收银机型号" />
        </a-form-model-item>
        <a-form-model-item
          label="打印机厂家："
          style="width: 50%; margin: 0 0 24px"
        >
          <a-select
            v-model="form.name"
            show-search
            placeholder="请选择打印机厂家"
          >
            <a-select-option
              v-for="(opt, idx) in options"
              :key="idx"
              :value="opt.value"
            >
              {{ opt.label }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="打印机型号："
          style="width: 50%; margin: 0 0 24px"
        >
          <a-input v-model="form.address" placeholder="请输入打印机型号" />
        </a-form-model-item>
        <a-form-model-item
          label="收银机状态："
          style="width: 50%; margin: 0 0 24px"
        >
          <a-radio-group name="radioGroup" v-model="form.address">
            <a-radio :value="1"> 开启 </a-radio>
            <a-radio :value="2"> 未开启 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          label="添加时间："
          style="width: 50%; margin: 0 0 24px"
        >
          <a-date-picker
            v-model="form.phone"
            style="width: 100%"
            placeholder="请选择时间"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import columns from "./colums";
export default {
  data() {
    return {
      modalTitle: false, //弹出框判断是添加、编辑
      visible: false,
      confirmLoading: false,
      columns,
      data: [
        {
          key: "1",
          cashName: "1号收银机",
          controlId: "47",
          city: "鸿鹄购物广场姜楼店",
          cashModel: "HBA-A4 ",
          cashStatus: "启用",
          printerFactory: "广州汉邦智能商用设备...",
          printerModel: "HBA-58G",
          controlStatus: "1",
        },
        {
          key: "2",
          cashName: "1号收银机",
          controlId: "47",
          city: "鸿鹄购物广场姜楼店",
          cashModel: "HBA-A4 ",
          cashStatus: "启用",
          printerFactory: "广州汉邦智能商用设备...",
          printerModel: "HBA-58G",
          controlStatus: "2",
        },
      ],
      pagination: {
        total: 50,
        current: 1,
        pageSize: 10,
      },
      searchData: {},
      searchOptions: [
        {
          type: "text",
          label: "超市名称",
          prop: "supermarketName",
        },
        {
          type: "text",
          label: "法人代表",
          prop: "legal",
        },
        {
          type: "select",
          label: "税务机关",
          prop: "taxation",
          attrs: {
            filterable: true,
          },
          enums: [
            {
              label: "石庙镇",
              value: "1",
            },
          ],
        },
        {
          type: "select",
          label: "收银机状态",
          prop: "taxation",
          attrs: {
            filterable: true,
          },
          enums: [
            {
              label: "启用",
              value: "1",
            },
            {
              label: "未启用",
              value: "2",
            },
          ],
        },
      ],
      options: [
        {
          label: "打印机厂家",
          value: "1",
        },
      ],
      form: {},
    };
  },
  methods: {
    handleSearch(val) {
      console.log(val, "查询");
    },
    handleEdit(val) {
      console.log(val, "编辑");
      this.visible = true;
      this.modalTitle = true;
    },
    handleDelete(val) {
      console.log(val, "删除");
    },
    handleChange(page, pageSize) {
      console.log(page, pageSize, "分页");
    },
    handleExport() {
      console.log("导出");
    },
    handleAdd() {
      console.log("添加");
      this.visible = true;
      this.modalTitle = false;
    },
    handleOk() {
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel() {
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  .table-box {
    padding-top: 30px;
  }
  .pagination-box {
    text-align: right;
    // position: absolute;
    // bottom: 40px;
    // right: 16px;
    padding-top: 40px;
    .ant-pagination {
      display: inline-block;
    }
  }
}
</style>
